import React, { useState, useEffect, useRef } from 'react'
import {
    Switch,
    Route,
    Redirect
} from 'react-router-dom'
import { useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'


import Home from '../home/homeui/Home'
import My from '../my/My'
import Message from '../message/Message'

import TabBar from '@/components/tabbar/TabBar'
import TabBarItem from '@/components/tabbar/TabBarItem'
import Login from '@/views/login/Login'
import Register from '@/views/login/register/Register'

import { HomeWrapper, MainWrapper } from './styledIndex'


export default function Index() {
    const [selectedIndex, setSelectedIndex] = useState('home')
    const [paths] = useState([
        '/home','/My','/message'
    ]) 
    const user = useSelector(state => {
        return state.getIn(['Login','userLogin'])
      })
      const state=useRef(Object.keys(user).length===0)

    const [showBool,setshowBool] = useState(false)
    const location = useLocation()
    useEffect(() => {
        setshowBool(paths.some(item => {
            return item === location.pathname
        }))
    }, [location,paths])

    return (
        <HomeWrapper>
            <MainWrapper>
                <Switch>
                    <Route path="/login">
                        <Login></Login>
                    </Route>
                    <Route path="/register">
                        <Register></Register>
                    </Route>
                    <Route path="/home">
                        <Home></Home>
                    </Route>
                    <Route path="/message">
                        <Message></Message>
                    </Route>
                    <Route path="/My">
                        <My></My>
                    </Route>
                    <Redirect from='/' to={state.current ? '/home':'/login'}></Redirect>
                </Switch>
            </MainWrapper>
            {
                showBool && <TabBar
                fixed={true}
                selectedIndex={selectedIndex}
                setSelectedIndex={setSelectedIndex}
                border={true}
                route={true}
            >
                <TabBarItem
                    name="home"
                    icon="homeHeartLine"
                    to="/home"
                >首页</TabBarItem>
                <TabBarItem
                    name="message"
                    icon='chatHeartLine'
                    to="/message"
                >消息</TabBarItem>
                <TabBarItem
                    name="My"
                    icon='user5Line'
                    to="/My"
                >我的</TabBarItem>
            </TabBar>
            }
            
        </HomeWrapper>
    )
}
